import React, { useEffect, useState } from 'react'
import {  Radio, Switch, Popconfirm, message, Button, Input, Pagination, Select,  Option, Card, Avatar } from 'antd';
// import { httpGetOrders, httpDelOrders } from '../../api/orders'
import { useNavigate } from 'react-router-dom'
import { httpGetLive, httpLiveState ,httpDelLive,} from '../../api/live'
const Order = () => {
  const { Option } = Select;
  // 路由跳转
  const navigate = useNavigate()
  const { Meta } = Card;
  // 数据
  const [data, setData] = useState([]);
  //  const [tel, setTel] = useState('')//手机号

  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [total, setTotal] = useState(0);//总页数
  //  搜索的内容
  const [one, setOne] = useState('');
  const [two, setTwo] = useState('');

  const [status, setStatus] = useState('')//状态
  const [value, setValue] = useState('')//搜索
  
  useEffect(() => {
    getData()
  }, [pageCode, value, status])

  // 获取数据
  const getData = async () => {
    const res = await httpGetLive('/live', { pageCode, pageSize, value, status });
    console.log(res)
    setData(res.data.list)
    setTotal(res.data.total)
  }
  // 删除
  const handleDelete = async (item) => {
    console.log(item)
    const res = await httpDelLive("/delLive", { id:item.id })
    if (res.data.code === 200) {
      message.success(res.data.msg);
      getData()
    } else {
      message.warning(res.data.msg);
    }

  }
  // 下拉框
  const handleChange = (value) => {
    setTwo(value)
    
  }
  // 搜索
  const Search = () => {
    setValue(one)
    setStatus(two);
   
  }
  // page页码改变
  const onPageChange = (page) => {
    setPageCode(page)
  };
  // 状态改变
  const onState = async (item) => {
    console.log(item);
    const res = await httpLiveState('/changeLiveStatus', { status:item.status, id:item.id });
    getData()
    message.success(res.data.msg);
  }
  const openLive=(item)=>{
    console.log(item);
    navigate(`/detail?id=${item.id}`)
  }
  return (
    <div>
      <div style={{ display: 'flex', marginBottom: '20px', marginLeft: '10px' }}>

        <Select
          defaultValue="请选择"
          style={{
            width: 230,
            marginRight: '10px'
          }}
          onChange={handleChange}
        >
          <Option value="true">直播中</Option>
          <Option value="false">已结束</Option>
        </Select>
        主播搜索: <Input allowClear onChange={(e) => setOne(e.target.value)} style={{ width: '300px', height: '35px', marginLeft: '10px' }} />
        <Button type="default" onClick={Search}>查询</Button>
      </div>
          {/* 卡片区域 */}
      <div style={{display:'flex',flexWrap:'wrap',}}>
        {
          data && data.map((item, index) => {
            return (
              <Card
              key={index}
                style={{
                  // width: 300,
                  padding: 10,
                  width: '20%'
                }}
                cover={
                  <img
                    alt="example"
                    src={item.img}
                    style={{height:200,width:250}}
                  />
                }
              >
                <Meta
                  avatar={<Avatar src={item.img} />}
                  title={item.title}
                />
                <p style={{ marginTop: '5px', display: 'flex', justifyContent: 'space-between', fontSize: '8px' }}>
                  <span >{item.name}</span>
                  <span></span>
                  <span>{item.showTime}</span>
                </p>

                <p style={{ display: 'flex', justifyContent: 'space-between', fontSize: '10px' ,color:'blue'}}>
                  {item.status === 'true' ? 
                  <span onClick={()=>openLive(item)}>进入直播</span> 
                  : 
                  '回看'}
                  <span></span>
                  {item.status === 'true' ? <Switch 
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  checked={status === 'true'}
                  defaultChecked onChange={()=>onState(item)} />
                   : 
                    <span onClick={() => handleDelete(item)}>删除</span>
                    }
                </p>

              </Card>
            )
          })
        }
      </div>
     
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination current={pageCode} total={total} pageSize={pageSize} onChange={onPageChange} />
      </div>

    </div>
  )
}
export default Order;
